<template>
  <rx-layout>
    <div slot="center">
      <a-form :form="form" style="height: 100%;">
        <a-row>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.incremental','增量值')">
              <a-input-number :placeholder="i18n('form.incremental','增量值')"  v-decorator="['step',{initialValue:1,rules: [{ required: true, message: '请输入增量值' }] }]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.required','是否必填')">
              <a-checkbox :placeholder="i18n('form.required','是否必填')" v-decorator="['required']" :checked="mdl.required" @change="changeData($event,'required')"></a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol"  :label="i18n('form.format','格式化')">
              <a-input :placeholder="i18n('form.format','格式化')" v-decorator="['formatter']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
              <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol">
                  <span style="padding-left: 20px;">{{i18n('form.eg',"'前置字符'+value+'后置字符' 例：'$'+value+'%'")}}</span>
              </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.minValue','最小值')">
              <a-input-number :placeholder="i18n('form.minValue','最小值')" v-decorator="['min',{initialValue:0, rules: [{ required: true, message:i18n('form.minValue','最小值','input')}] }]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.maxValue','最大值')">
              <a-input-number :placeholder="i18n('form.maxValue','最大值')" v-decorator="['max',{initialValue:100, rules: [{ required: true, message: i18n('form.maxValue','最大值','input')}] }]"/>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </rx-layout>
</template>

<script>

    export default {
        name: "rowControl_inputNumber",
        data(){
          return {
            labelCol: { span:6 },
            wrapperCol: { span:18 },
            labelCol1: { span:3 },
            wrapperCol1: { span:19 },
            form: this.$form.createForm(this),
            mdl:{}
          }
        },
      methods:{
          i18n(name, text, key) {
              return this.$ti18(name, text, "rowControls", key);
          },
        setData(controlConf){
          this.mdl=controlConf;
          this.form.setFieldsValue(this.mdl)
        },
        validate(callback){
          var self=this;
          this.form.validateFields((err, values) => {
            if(err){
              return;
            }
            if(values.min>values.max){
              this.$message.warning(this.i18n('tips.minValue','最小值不能大于最大值!'));
              return;
            }
            self.mdl=values;
            callback();
          });
        },
        getData(){
          return this.mdl;
        },
        changeData(e,field){
          this.mdl[field]=e.target.checked;
        }
      }
    }
</script>

<style scoped>

</style>